<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>餐厅首页</title>
    <link rel="stylesheet" th:href="@{/frontStatic/css/main.css}">
    <link rel="stylesheet" th:href="@{/frontStatic/css/font-awesome.min.css}">   <!-- 头部样式 -->
    <link rel="stylesheet" th:href="@{/frontStatic/css/bootstrap/css/bootstrap.min.css}">
    <link rel="icon" sizes="192x192" th:href="@{/frontStatic/image/logo.png}">
    <script type="text/javascript" th:src="@{/frontStatic/js/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/frontStatic/css/bootstrap/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/frontStatic/js/holder.js}"></script>
    <script type="text/javascript" th:src="@{/frontStatic/js/front/sort.js}"></script>
</head>
<body>
<div id="main" class="container">
    <div id="header">
        <div class="row">
            <div class="col-md-4" role="navigation">
            </div>
            <div class="col-md-8">
                <ul class="nav nav-pills pull-right">
                    <li><a th:href="@{/front/toShopCart}"> <i
                            class="fa fa-shopping-cart" style="color: #F22E00"></i>
                        购物车
                    </a></li>
                    <li class="info-a">
                        <a th:href="@{/front/toInfo}" style="color: #F22E00" th:text="${session.currUser.name}">
                            name
                            <span class="glyphicon glyphicon-triangle-bottom" style="font-size: 5px;margin-left: 7px;" aria-hidden="true">
            </span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a th:href="@{/front/toInfo}">账户管理</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a th:href="@{/front/logout}" class="login-out">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div id="header-nav">
            <nav class="navbar navbar-default" id="header-nav-middle">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed"
                                data-toggle="collapse"
                                data-target="#bs-example-navbar-collapse-1"
                                aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span> <span
                                class="icon-bar"></span> <span class="icon-bar"></span> <span
                                class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" th:href="@{/front/toMain}"><span class="logo-word">My Canteen</span></a>
                    </div>

                    <div class="collapse navbar-collapse"
                         id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li><a class="a-color" th:href="@{/front/toMain}">首页</a></li>
                            <li><a class="a-color" th:href="@{/front/toOrder}">我的订单</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
        <div class="header-bottom">
            <!-- 轮播图 -->
            <div id="mycarousel" class="carousel slide" data-ride="carousel" style="width: 1120px; height: 250px">
                <div class="carousel-inner">
                    <div class="item active">
                        <img th:src="@{/frontStatic/image/banner1.jpg}" alt="" style="width: 1120px; height: 250px">
                    </div>

                    <div class="item">
                        <img th:src="@{/frontStatic/image/banner2.jpg}" alt="" style="width: 1120px; height: 250px">
                    </div>
                    <div class="item">
                        <img th:src="@{/frontStatic/image/banner3.jpg}" alt="" style="width: 1120px; height: 250px">
                    </div>
                </div>

                <ol class="carousel-indicators">
                    <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#mycarousel" data-slide-to="1"></li>
                    <li data-target="#mycarousel" data-slide-to="2"></li>
                </ol>

                <a class="left carousel-control" href="#mycarousel" role="button"
                   data-slide="prev" style="display: none;">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#mycarousel" role="button"
                   data-slide="next" style="display: none;">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
            <div class="clear-float"></div>
        </div>
    </div>
    <div class="content">
        <div class="module">
            <div class="hd">
                <h2>菜肴</h2>
                <hr>
            </div>
            <div class="bd">
                <div class="data">
                    <ul>
                        <li class="data-item-li" th:each="menu : ${session.menuList}" th:if="${menu.category == '菜肴'}">
                            <div>
                                <div class="to-big">
                                    <a th:href="@{|/front/toDetail/${menu.menuId}|}">
                                        <img th:src="@{|/picture/${menu.picture}|}" alt="菜品图片"
                                             width="200" height="200"/>
                                    </a>
                                </div>
                                <p class="text-right">
                                    <a th:href="@{|/front/toDetail/${menu.menuId}|}" th:text="${menu.name}">菜品</a>
                                </p>
                                <div class="text-right">
                                    <b th:text="'￥' + ${menu.price}">￥00.00</b>
                                </div>
                            </div>
                        </li>
                        <div class="clear-float" style="clear: both;"></div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="module">
            <div class="hd">
                <h2>甜点</h2>
                <hr>
            </div>
            <div class="bd">
                <div class="data">
                    <ul>
                        <li class="data-item-li" th:each="menu : ${session.menuList}" th:if="${menu.category == '甜点'}">
                            <div>
                                <div class="to-big">
                                    <a th:href="@{|/front/toDetail/${menu.menuId}|}">
                                        <img th:src="@{|/picture/${menu.picture}|}" alt="菜品图片"
                                             width="200" height="200"/>
                                    </a>
                                </div>
                                <p class="text-right">
                                    <a th:href="@{|/front/toDetail/${menu.menuId}|}" th:text="${menu.name}">菜品</a>
                                </p>
                                <div class="text-right">
                                    <b th:text="'￥' + ${menu.price}">￥00.00</b>
                                </div>
                            </div>
                        </li>
                        <div class="clear-float" style="clear: both;"></div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="module">
            <div class="hd">
                <h2>主食</h2>
                <hr>
            </div>
            <div class="bd">
                <div class="data">
                    <ul>
                        <li class="data-item-li" th:each="menu : ${session.menuList}" th:if="${menu.category == '主食'}">
                            <div>
                                <div class="to-big">
                                    <a th:href="@{|/front/toDetail/${menu.menuId}|}">
                                        <img th:src="@{|/picture/${menu.picture}|}" alt="菜品图片"
                                             width="200" height="200"/>
                                    </a>
                                </div>
                                <p class="text-right">
                                    <a th:href="@{|/front/toDetail/${menu.menuId}|}" th:text="${menu.name}">菜品</a>
                                </p>
                                <div class="text-right">
                                    <b th:text="'￥' + ${menu.price}">￥00.00</b>
                                </div>
                            </div>
                        </li>
                        <div class="clear-float" style="clear: both;"></div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="module">
            <div class="hd">
                <h2>饮品</h2>
                <hr>
            </div>
            <div class="bd">
                <div class="data">
                    <ul>
                        <li class="data-item-li" th:each="menu : ${session.menuList}" th:if="${menu.category == '饮品'}">
                            <div>
                                <div class="to-big">
                                    <a th:href="@{|/front/toDetail/${menu.menuId}|}">
                                        <img th:src="@{|/picture/${menu.picture}|}" alt="菜品图片"
                                             width="200" height="200"/>
                                    </a>
                                </div>
                                <p class="text-right">
                                    <a th:href="@{|/front/toDetail/${menu.menuId}|}" th:text="${menu.name}">菜品</a>
                                </p>
                                <div class="text-right">
                                    <b th:text="'￥' + ${menu.price}">￥00.00</b>
                                </div>
                            </div>
                        </li>
                        <div class="clear-float" style="clear: both;"></div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>


